<template>
  <div class="viewDetail">
    <div class="viewDetail-title flex pl-16 bg_fff c_text2">
      <div class="tab-item fw-6 commhover mr-26">任务详情</div>
    </div>
    <template v-if="info">
      <div class="viewDetail-big">
        <div class="task_title f-20 mb-10 fw-6 c_text2">测试</div>
        <div class="flex tasktype">
          <el-tag class="mr-8" style="color: #1d39c4"
            >任务类型：批量拉群</el-tag
          >
          <div class="taskstatus f-12 flexcenter br_4 warn_border mr-8">
            主账号下发
          </div>
          <div class="taskstatus f-12 c_fff flexcenter br_4 warn">等待中</div>
        </div>
        <div class="mt-12 mb-20 flex infobox">
          <div class="infoitem">
            <div class="mb-12">创建时间：2024-04-11 13:58</div>
            <div class="mb-12">开始时间：2024-04-11 13:58</div>
            <div class="mb-12">结束时间：--</div>
            <div class="mb-12">创建人：主账号</div>
          </div>
          <div class="infoitem">
            <div class="mb-12">目标群人数：500</div>
            <div class="mb-12">预估入群率：100%</div>
            <div class="mb-12">
              排除群：<span
                class="c_primary commhover"
                @click="handleShowDetail('排除群条件')"
                >查看</span
              >
            </div>
            <div class="mb-12">
              目标群：<span
                class="c_primary commhover"
                @click="handleShowDetail('目标群条件')"
                >查看</span
              >
            </div>
          </div>
          <div class="infoitem">
            <div class="mb-12">
              被邀请客户：<span
                class="c_primary commhover"
                @click="handleShowDetail('被邀请客户条件')"
                >查看</span
              >
            </div>
            <div class="mb-12">入群前引导语：--</div>
            <div class="mb-12">流失和拉黑好友：不发送</div>
          </div>
        </div>
        <el-tabs v-model="tabactive" type="card" class="cardtab">
          <el-tab-pane label="客户状态" name="first"></el-tab-pane>
          <el-tab-pane label="目标群状态" name="second"></el-tab-pane>
        </el-tabs>
        <!-- 表格 -->
        <client-status v-if="tabactive == 'first'" />
        <goal-status v-if="tabactive == 'second'" />
      </div>
      <div class="greetfoot flexcenter bg_fff p-12">
        <el-button v-hasPermi="['single:batchgroup:cancel']" type="primary" size="small" plain @click="handleSave"
          >取消</el-button
        >
        <el-button v-hasPermi="['single:batchgroup:edit']" type="primary" size="small" plain @click="handleSave"
          >修改</el-button
        >
      </div>
    </template>
    <div v-else class=" viewDetail-big flexcenter blankimg">
      <img src="@/assets/images/peiyNU.png" alt="" />
    </div>

    <info-detail v-if="showinfo" :visableIf.sync="showinfo" :title="title" />
  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";
import { listUser } from "@/api/system/user";
import InfoDetail from "@/views/communityOperation/batchgrouping/InfoDetail";
import ClientStatus from "./ClientStatus.vue";
import GoalStatus from "./GoalStatus.vue";
export default {
  name: "addOrEditUserOperations",
  components: {
    InfoDetail,
    ClientStatus,
    GoalStatus,
  },
  data() {
    return {
      loading: false,
      title: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,

      showinfo: false,
      tabactive: "first",
    };
  },
  props: {
    info: {
      type: Object,
      default: {},
    },
  },
  created() {
    if (this.info) {
      this.form.name = this.info.planName;
    }
  },
  methods: {
    handleShowDetail(title) {
      this.title = title;
      this.showinfo = true;
    },

    handleSave() {
      console.log("this.form:", this.form);
    },

    getList() {},
  },
};
</script>
<style lang="scss" scoped>
.viewDetail {
  height: 100%;
  position: relative;
  .viewDetail-title {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e9e9e9;
  }
}
.viewDetail-big {
  height: calc(100vh - 256px);
  overflow-y: auto;
  padding: 20px;
}
.tasktype {
  .taskstatus {
    padding: 2px 7px;
    background-color: #3070ff;
    &.warn {
      background-color: #ff8243;
    }
    &.warn_border {
      background-color: #fff7e6;
      border: 1px solid #ffd591;
      color: #d46b08;
    }
  }
}
.infobox {
  padding: 12px 12px 0;
  background: #f3f3f3;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
  div {
    width: 220px;
  }
}
.cardtab {
  ::v-deep .el-tabs__nav,
  ::v-deep .el-tabs__header {
    border-color: #e9e9e9;
    // border: 0;
  }
  ::v-deep .el-tabs__item {
    border: 1px solid #e9e9e9;
    margin-right: 3px;
    background-color: #fafafa;
    border-radius: 4px 4px 0 0;
    color: rgba(0, 0, 0, 0.65);
    &.is-active {
      background-color: #fff;
      font-weight: 500;
      text-shadow: 0 0 0.25px currentColor;
      color: rgba(0, 0, 0, 0.85) !important;
    }
  }
  ::v-deep .el-tabs__item:first-child {
    border-left: 1px solid #e9e9e9;
  }
  ::v-deep .el-tabs__header .el-tabs__nav {
    border: 0;
  }
}
.iconinfo {
  color: #f5222d;
  transform: rotate(180deg);
}
.greetfoot {
  border-top: 1px solid #e9e9e9;
  position: sticky;
  bottom: 0;
  z-index: 999;
}
.blankimg{
  img{
    width: 100px;
    height: 100px;
  }
}
</style>
